<template>
  <el-container>
    <el-header style="background-color: white;color: #000000;">
      <h1 align="center">试卷生成</h1>

    </el-header>
    <el-main>
      <!-- 行内表单 -->
      <el-form :model="paperData" :inline="true" class="demo-form-inline" label-width="100px">
        <el-form-item label="试卷名称">
          <el-input v-model="paperData.paperName"></el-input>
        </el-form-item>
        <el-form-item label="试卷总分">
          <el-input-number v-model="paperData.paperScore" :min="100" :max="200"></el-input-number>
        </el-form-item>
        <el-form-item label="考试时长">
          <el-input-number v-model="paperData.paperTime" :min="60" :max="300"></el-input-number>
        </el-form-item>

      </el-form>
      <!-- 表格组件 -->
      <el-table :data="list" :row-key="rowKey" style="width: 100%;" @selection-change="seleced">
        <!-- 列表签 -->
        <el-table-column :reserve-selection="true" type="selection" width="55px"></el-table-column>
        <el-table-column prop="quId" label="编号" width="100px"></el-table-column>
        <el-table-column prop="quContent" label="题目" width="400px"></el-table-column>
        <el-table-column prop="quType" label="题型" width="100px"></el-table-column>
        <el-table-column prop="quScore" label="分数" width="100px"></el-table-column>
        <el-table-column prop="quAnswer" label="答案" width="100px"></el-table-column>
        <el-table-column prop="createTime" label="修改时间" width="200px"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="update(scope.row)">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="block">
        <!-- size-change: 下拉框选中事件触发的函数；-->
        <!-- current-change：页码、上一页和下一页触发的事件 -->
        <!-- current-page： 当前页的页码 -->
        <!-- page-sizes：下拉框选中行数的集合 -->
        <!-- page-size：每页显示条数 -->
        <!--layout：分页页面布局 -->
        <!-- total：总条数 -->

        <el-pagination @size-change="sc" @current-change="cc" :current-page="queryParam.page"
          :page-sizes="[5, 10, 20, 30]" :page-size="queryParam.row" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div align="center">
        <el-button type="success" size="mini" @click="create">生成试卷</el-button>
      </div>
      <!-- 试卷预览 -->
      <el-dialog title="预览试卷" :visible.sync="isShow" width="50%">
        <div align="center">
          <p>
            试卷名称:{{paper.paperName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            试卷总分:{{paper.paperScore}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            考试时长:{{paper.paperTime}}
          </p>
          <br>
        </div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>一、单选题</span>
          </div>
          <div class="text item" v-for="(x,index) in signList">
            <p>{{index+1}}:{{x.quContent}}</p>
            <p>A:<input type="radio" :name="'s'+index" /><span>{{x.quAoption}}</span></p>
            <p>B:<input type="radio" :name="'s'+index" /><span>{{x.quBoption}}</span></p>
            <p>C:<input type="radio" :name="'s'+index" /><span>{{x.quCoption}}</span></p>
            <p>D:<input type="radio" :name="'s'+index" /><span>{{x.quDoption}}</span></p>
            <br>
          </div>

        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>二、多选题</span>
          </div>
          <div class="text item" v-for="(x,index) in moreList">
            <p>{{index+1}}:{{x.quContent}}</p>
            <p>A:<input type="checkbox" :name="'m'+index" /><span>{{x.quAoption}}</span></p>
            <p>B:<input type="checkbox" :name="'m'+index" /><span>{{x.quBoption}}</span></p>
            <p>C:<input type="checkbox" :name="'m'+index" /><span>{{x.quCoption}}</span></p>
            <p>D:<input type="checkbox" :name="'m'+index" /><span>{{x.quDoption}}</span></p>
            <br>
          </div>

        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>三、判断题</span>
          </div>
          <div class="text item" v-for="(x,index) in judgeList">
            <p>{{index+1}}:{{x.quContent}}</p>
            <p>√<input type="radio" :name="'j'+index" /></p>
            <p>×<input type="radio" :name="'j'+index" /></p>
            <br>
          </div>

        </el-card>
      </el-dialog>

    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "questionManager",
    data() {
      return {
        isShow: true,
        list: [], //当前页面集合
        total: 0, //总条数
        totalPage: "", //总页数
        queryParam: { //分页参数
          page: 1,
          row: 5,
        },
        paperData: {
          paperName: "",
          paperScore: "",
          paperTime: "",
          quIds: ""
        },
        qs: [], //获取选中的题库的值
        paper: {}, //预览试卷信息
        signList: [], //单选数组
        moreList: [], //多选数组
        judgeList: [] //判断数组

      }

    },
    methods: { //查询分页
      queryByPage() {
        var self = this;
        this.$http.get("/paperQuestion/queryQuetionByPage", {
          params: this.queryParam,
        }).then(function(rs) {
          if (rs.data.success) {
            //赋值当前页
            self.list = rs.data.data.list;
            //赋值总条数
            self.total = rs.data.data.total;
            //赋值总页数
            self.totalPage = rs.data.data.totalPage;


          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },
      sc(row) { //下拉框触发
        this.queryParam.row = row;
        //刷新
        this.queryByPage();
      },
      cc(page) { //页码触发事件
        this.queryParam.page = page;
        //刷新
        this.queryByPage();
      },
      update(row) {
        console.log(row);
      },

      seleced(v) { //表格的复选框选中触发的函数
        console.log(v);
        this.qs = v;

      },
      create() { //生成试卷
      //清空quIds
        this.paperData.quIds="";
        for (var i = 0; i < this.qs.length; i++) {
          
          this.paperData.quIds += this.qs[i].quId + ",";
        }
        console.log(this.paperData);
        var self = this;
        this.$http.get("/paper/create", {
          params: this.paperData,
        }).then(function(rs) {
          self.$alert(rs.data.info);
          if (rs.data.success) {
            //成功逻辑
          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })

      },
      rowKey(v) {
        //返回的编号
        return v.quId;
      },

      showPaper() {
        var self = this;
        this.$http.get("/paper/showPaper", {
          params: {
            "paperName": "liangzai2",
          }
        }).then(function(rs) {
          self.paper = rs.data.data;

          for (var i = 0; i < self.paper.list.length; i++) {
            //添加单选题集合
            if (self.paper.list[i].quType == "单选题") {
              self.signList.push(self.paper.list[i]);

            } else if (self.paper.list[i].quType == "多选题") {
              self.moreList.push(self.paper.list[i]);

            } else {
              self.judgeList.push(self.paper.list[i]);

            }
          }

        }).catch(function(rs) {
          console.log(rs);
          self.$message("服务器连接错误");
        })
      },




    },
    mounted() {
      this.queryByPage();
      this.showPaper();
    }

  }
</script>

<style>
</style>
